<template>
  <div id="searchPage">
    <c-title :hide="false" text="搜索"></c-title>
    <div class="head">
      <div class="inpbox">
        <i class="iconfont icon-sousuo1"></i>
        <!-- <input type="text" :placeholder="searchHistory[0].name ? searchHistory[0].name : '请输入搜索内容'" v-model="keyWord" @confirm="goSearch" @input="bindinp" /> -->
        <van-field :placeholder="searchHistory[0] && searchHistory[0].name ? searchHistory[0] && searchHistory[0].name : '请输入搜索内容'" v-model="keyWord" @input="bindinp" />
      </div>
      <span @click="goSearch">{{ keyWord.length > 0 ? "搜索" : "取消" }}</span>
    </div>
    <div class="contenBox">
      <!-- 最近搜索 -->
      <div class="recent" v-if="searchHistory.length > 0">
        <div class="recent_top">
          <span>最近搜索</span>
          <icon class="iconfont icon-ht_operation_delete" @click="deleHistory"></icon>
        </div>
        <div class="recent_conten">
          <block v-for="(item, index) in searchHistory" :key="index">
            <div class="recent_lis" @click="tapKeyWord(item.name)">{{ item.name }}</div>
          </block>
        </div>
      </div>
      <!-- 搜索发现 -->
      <div class="discover" v-if="discoverInfo">
        <div class="recent_top">
          <span>搜索发现</span>
        </div>
        <div class="discover_conten">
          <block v-for="(item, index) in discoverInfo" :key="index">
            <div class="discover_lis" :style="{ color: `rgb(${item.color})`, backgroundColor: `rgba(${item.color},0.07)` }" @click="tapKeyWord(item.title)">
              {{ item.title }}
              <div class="hot_logo" v-if="item.image_url && isSotreKey === 3" :style="{ backgroundImage: `url('${item.image_url}')` }"></div>
              <div class="hot_logo" v-if="item.img_url" :style="{ backgroundImage: `url('${item.img_url}')` }"></div>
            </div>
          </block>
        </div>
        <div class="discover_lis" @click="discoverMore" v-if="discoverPage < discoverLastPage">
          <div class="hot_logo_more">
            查看更多
            <icon class="iconfont icon-member-bottom"></icon>
          </div>
        </div>
      </div>
      <!-- 热门搜索 -->
      <div class="popular" v-if="storeInfo">
        <div class="recent_top">
          <span>热门搜索</span>
        </div>
        <block v-for="(item, index) in storeInfo" :key="index">
          <div class="popular_conten" @click="tapUrl(item)">
            <div class="popular_left">
              <img :src="item.image_url" />
            </div>
            <div class="popular_right">
              <div class="title">{{ item.title }}</div>
              <div class="detail">{{ item.subtitle }}</div>
              <div class="detail" v-if="isSotreKey === 3">{{ item.another_title }}</div>
            </div>
          </div>
        </block>
      </div>
    </div>
  </div>
</template>
<script>
import searchPage_controller from "./searchPage_controller.js";
export default searchPage_controller;
</script>
<style scoped>
.inpbox::v-deep .van-cell {
  background: transparent;
  padding: 0;
}
</style>
<style lang="scss" scoped>
/* packageI/searchPage/searchPage.wxss */

#searchPage {
  background-color: #fff;
}

.head {
  width: 100%;
  border-bottom: 0.0313rem solid #e4e4e4;
  padding: 0.9375rem 0.9375rem 0.625rem 1.125rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.inpbox {
  width: 18.9375rem;
  height: 1.9375rem;
  border-radius: 1.0313rem;
  background: #f2f5f5;
  display: flex;
  align-items: center;
}

.head span {
  font-size: 0.875rem;
  margin-left: 0.6875rem;
}

.inpbox {
  .iconfont {
    margin-left: 1.0625rem;
    margin-right: 1.3438rem;
  }

  input {
    flex: 1;
    display: flex;
    align-items: center;
    border: none;
  }
}

.contenBox {
  padding: 0.875rem 0.9375rem 0.625rem 1.0625rem;
  box-sizing: border-box;
  width: 100%;
  background-color: #fff;
}

.recent_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;

  span {
    font-size: 1rem;
  }
}

.recent .head_top span {
  font-size: 0.875rem;
}

.recent_conten {
  display: flex;
  align-items: center;
  margin-top: 0.7813rem;
  flex-wrap: wrap;
}

.recent_lis {
  padding: 0.1563rem 0.6875rem;
  background-color: #f9f9f9;
  border-radius: 0.7813rem;
  margin-right: 0.625rem;
  margin-top: 0.7813rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 搜素发现 */

.recent {
  margin-bottom: 2.3125rem;
}

.discover_conten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.discover_lis {
  padding: 0.1563rem 0.6875rem;
  background: #f9f9f9;
  border-radius: 0.7813rem;
  margin-right: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  margin-top: 0.7813rem;

  .hot_logo_more {
    color: #9b9b9b;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
  }
}

.hot {
  color: #c23b38;
}

.hot_logo {
  /* background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/img/icon_hot@2x.png'); */
  background-size: cover;
  background-repeat: no-repeat;
  width: 0.9375rem;
  height: 0.9375rem;
  margin-left: 0.375rem;
}

/* 热门搜索 */

.discover {
  margin-bottom: 2.4688rem;
}

.popular_conten {
  display: flex;
  align-items: center;
  margin-top: 0.7813rem;
}

.popular_left {
  width: 2.8125rem;
  height: 2.8125rem;
  border-radius: 0.125rem;

  img {
    width: 100%;
    height: 100%;
  }
}

.popular_right {
  flex: 1;
  margin-left: 0.5938rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.popular_right {
  .title {
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    text-align: left;
  }

  .detail {
    font-size: 0.75rem;
    color: #9b9b9b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }
}
</style>
